<script>
import {useRouter} from "vue-router"
import {Pointer, UserFilled} from "@element-plus/icons-vue";
export default {
  components: {UserFilled},
  computed: {
    Pointer() {
      return Pointer
    },
  },
  data(){
    return{
      router:useRouter(),
      userinfo:{
        user_id:'',
        user_name:'',
      },
      userData:[]
    }
  },
  methods:{
    ExitLogin(){
      this.router.push('/');
    },
    LoadUserData(){
      this.userinfo.user_id=localStorage.getItem('user_id')
      console.log(this.userinfo.user_id)
      this.$http.get("http://localhost:8080/user/showdetailuserinfo",{params:{
          user_id:this.userinfo.user_id
        }}).then((res)=>{
        this.userinfo=res.data
        console.log(this.userinfo)
      }).catch(function(err){
        console.log(err);
      })
    },
    },
  mounted(){
    this.LoadUserData();
  }
}
</script>

<template>
  <el-header>
    <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#f89898"
        text-color="#fff"
        active-text-color="#ffd04b"
    >
      <router-link  to="/Main" class="no-underline">
      <el-menu-item index="1">
      首页</el-menu-item>
      </router-link>
      <el-sub-menu index="2">
        <template #title>我的订单</template>
        <router-link to="/AwaitingPayment" class="no-underline"><el-menu-item index="2-1">待付款</el-menu-item></router-link>
        <router-link to="/AwaitingShipment" class="no-underline"><el-menu-item index="2-2">待发货</el-menu-item></router-link>
        <router-link to="/RoadingShipment" class="no-underline"><el-menu-item index="2-3">在途中</el-menu-item></router-link>
        <router-link to="/FinishingShipment" class="no-underline"><el-menu-item index="2-4">已完成</el-menu-item></router-link>
        <router-link to="/AllOrders" class="no-underline"><el-menu-item index="2-5">全部订单</el-menu-item></router-link>
      </el-sub-menu>
      <router-link  to="/ShopCart" class="no-underline"><el-menu-item index="6" >
        我的购物车
      </el-menu-item></router-link>
      <router-link  to="/ProductRelease" class="no-underline"><el-menu-item index="3" >
        <el-button round color="#79bbff" size="large" type="primary" :icon="Pointer">发布闲置</el-button>
      </el-menu-item></router-link>
      <router-link to="/MyCenter" class="no-underline"><el-menu-item index="4">欢迎您,{{this.userinfo.user_name}}
        <el-icon><UserFilled/></el-icon>
      </el-menu-item> </router-link>
      <el-menu-item index="5">
        <el-button type="primary" round @click="ExitLogin">退出登录</el-button>
      </el-menu-item>
    </el-menu></el-header>

  <el-main>
    <router-view></router-view>
  </el-main>
</template>

<style>
.no-underline {
  text-decoration: none;
}
</style>